<template>
  <ve-form-item v-bind="$attrs">
    <view
      class="member-name-tag"
      :class="[memberInfo.memberLabel == 2 ? 'success' : 'danger']"
      v-if="memberInfo.memberLabel == 2 || memberInfo.memberLabel == 3"
    >
      {{ memberInfo.memberLabelName }}
    </view>
    <slot></slot>
    <template #rightContent>
      <view style="text-align: right">
        <ve-button v-if="showUploadDriverBtn" type="plain" size="mini" @click="uploadDriverLicenseFn">未上传驾驶证</ve-button>
        <ve-button style="margin-left: 20rpx" v-if="showUploadIdCardBtn" type="plain" size="mini" @click="uploadIdCardFn">
          未上传身份证明
        </ve-button>
      </view>
    </template>
  </ve-form-item>
</template>
<script setup>
  defineProps({
    memberInfo: Object,
    showUploadDriverBtn: Boolean,
    showUploadIdCardBtn: Boolean,
    memeberType: Number,
  })
  const emit = defineEmits(['uploadDriverLicenseFn', 'uploadIdCardFn'])
  const uploadDriverLicenseFn = () => {
    emit('uploadDriverLicenseFn')
  }
  const uploadIdCardFn = () => {
    emit('uploadIdCardFn')
  }
</script>
<style lang="less" scoped>
  .member-name-tag {
    height: 40rpx;
    line-height: 40rpx;
    font-size: 24rpx;
    background: #ffece8;
    border-radius: 16rpx;
    margin-right: 16rpx;
    opacity: 1;
    font-weight: 500;
    text-align: center;
    padding: 0 16rpx;
    &.danger {
      background: #ffece8;
      color: #f53f3fff;
    }
    &.success {
      background: #e8ffea;
      color: #00b42aff;
    }
  }
</style>
